<template>
	<view class="real-name-bg">
		<!-- <view class="custom-tips">
			<view v-show="!boundFlag">
				<view class="custom-tip">
					<view class="custom-tip-l">1.</view>
					<view class="custom-tip-r">认证后不可再修改！</view>
				</view>
				<view class="custom-tip">
					<view class="custom-tip-l">2.</view>
					<view class="custom-tip-r">请在下方输入您的证件信息，并上传身份证正反面</view>
				</view>
			</view>
			<view class="custom-tip" v-show="boundFlag">
				<view class="custom-tip-l"></view>
				<view class="custom-tip-r">你已完成实名</view>
			</view>
		</view> -->
		<view class="name-title">
			<view class="title-h2" v-show="!boundFlag">
				填写实名认证信息
			</view>
			<view class="title-tip" v-show="!boundFlag">
				根据监管要求,您的身份信息及证件照仅用于本平台的实名认证
			</view>
			<view class="title-h2" v-show="boundFlag">
				{{state == '3' ? '你已完成实名' : '实名审核中'}}
			</view>
		</view>
		<view class="name-col">
			1、请输入您的身份信息
		</view>
		<view class="name-input-list animate__fadeInUp" style="animation-duration: 2s;">
			<view class="name-input-item name-input-item1">
				<uv-input placeholder="姓名" border="none" color="#000" v-model="realName" type="text" :clearable="false"
					:readonly="boundFlag">
				</uv-input>
				<view class="name-item-tip" v-show="realName == ''">
					请输入您的姓名
				</view>
			</view>
			<view class="name-input-item">
				<uv-input placeholder="身份证号码" color="#000" border="none" v-model="idNumber" type="idcard"
					:clearable="false" :readonly="boundFlag" maxlength="18">
				</uv-input>
				<view class="name-item-tip" v-show="idNumber == ''">
					请输入您的身份证号码
				</view>
			</view>
		</view>
		<view class="name-col">
			2、请上传您的证件照
		</view>
		<view class="name-img animate__fadeInUp" style="animation-duration: 2s;">
			<uv-upload max-count="1" name="file_data" :fileList="fileList3" @afterRead="uoloadPic3" @delete="deletePic3"
				:deletable="!boundFlag" class="pic3">
				<view class="pic3-img" mode="widthFix"></view>
			</uv-upload>
			<view class="file-list">
				<uv-upload upload-text="正面" max-count="1" name="file_data" :fileList="fileList1" @afterRead="uoloadPic1"
					@delete="deletePic1" :deletable="!boundFlag" class="pic1">
					<view class="pic1-img" mode="widthFix"></view>
				</uv-upload>
				<uv-upload upload-text="反面" max-count="1" name="file_data" :fileList="fileList2" @afterRead="uoloadPic2"
					@delete="deletePic2" :deletable="!boundFlag" class="pic2">
					<view class="pic2-img" mode="widthFix"></view>
				</uv-upload>
			</view>
		</view>
		<!-- <view>
			<uv-form class="common-form" label-position="top" label-width="150" :border-bottom="false">
				<uv-form-item label="姓名" :border-bottom="false">
					<uv-input placeholder="请输入真实姓名" v-model="realName" type="text" :clearable="false"
						:readonly="boundFlag">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="身份证号码" :border-bottom="false">
					<uv-input placeholder="请输入" v-model="idNumber" type="text" :clearable="false" :readonly="boundFlag">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="身份证正反面" :border-bottom="false">
					<uv-upload width="220rpx" height="220rpx" upload-text="手持" max-count="1" name="file_data"
						:fileList="fileList3" @afterRead="uoloadPic3" @delete="deletePic3" :deletable="!boundFlag">
					</uv-upload>
					<uv-upload width="220rpx" height="220rpx" upload-text="正面" max-count="1" name="file_data"
						:fileList="fileList1" @afterRead="uoloadPic1" @delete="deletePic1" :deletable="!boundFlag">
					</uv-upload>
					<uv-upload width="220rpx" height="220rpx" upload-text="反面" max-count="1" name="file_data"
						:fileList="fileList2" @afterRead="uoloadPic2" @delete="deletePic2" :deletable="!boundFlag">
					</uv-upload>
				</uv-form-item>
			</uv-form>
		</view> -->
		<view class="fixed-bottomx" v-show="!boundFlag">
			<view class="fixed-bottom-innerx">
				<view type="primary" size="large" @click="submitAuthenticationInfo">提交认证</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/common/config'
	export default {
		data() {
			return {
				realName: '',
				idNumber: '',
				fileList1: [],
				identityCardPic1: '',
				fileList2: [],
				identityCardPic2: '',
				fileList3: [],
				identityCardPic3: '',
				boundFlag: false,
				state: '',
			}
		},
		computed: {},
		onLoad(option) {
			this.findMyAuthenticationInfo();
		},
		methods: {

			findMyAuthenticationInfo() {
				var that = this;
				uni.$uv.http.get('/member/findMyAuthenticationInfo').then(res => {
					var authenticationInfo = res.data;
					if (authenticationInfo) {
						that.state = authenticationInfo.state;
						that.boundFlag = true;
						that.realName = authenticationInfo.realName;
						that.idNumber = authenticationInfo.idNumber;
						that.fileList1.push({
							url: authenticationInfo.identityCardPic1,
							status: 'success',
							message: ''
						});
						that.fileList2.push({
							url: authenticationInfo.identityCardPic2,
							status: 'success',
							message: ''
						});
						that.fileList3.push({
							url: authenticationInfo.identityCardPic3,
							status: 'success',
							message: ''
						});
					}
				});
			},

			deletePic2() {
				this.identityCardPic2 = '';
				this.fileList2 = [];
			},
			deletePic3() {
				this.identityCardPic3 = '';
				this.fileList3 = [];
			},

			uoloadPic3(event) {
				var that = this;
				that.fileList3.push({
					url: event.file.url,
					status: 'uploading',
					message: '上传中'
				});
				uni.$uv.http.upload(config.storageUploadUrl, {
					filePath: event.file.url,
					name: 'file_data',
				}).then(res => {
					that.identityCardPic3 = res.data[0];
					that.fileList3.splice(0, 1, {
						url: event.file.url,
						status: 'success',
						message: ''
					});
				});
			},
			uoloadPic2(event) {
				var that = this;
				that.fileList2.push({
					url: event.file.url,
					status: 'uploading',
					message: '上传中'
				});
				uni.$uv.http.upload(config.storageUploadUrl, {
					filePath: event.file.url,
					name: 'file_data',
				}).then(res => {
					that.identityCardPic2 = res.data[0];
					that.fileList2.splice(0, 1, {
						url: event.file.url,
						status: 'success',
						message: ''
					});
				});
			},

			deletePic1() {
				this.identityCardPic1 = '';
				this.fileList1 = [];
			},

			uoloadPic1(event) {
				console.log("123")
				var that = this;
				that.fileList1.push({
					url: event.file.url,
					status: 'uploading',
					message: '上传中'
				});
				uni.$uv.http.upload(config.storageUploadUrl, {
					filePath: event.file.url,
					name: 'file_data',
				}).then(res => {
					that.identityCardPic1 = res.data[0];
					that.fileList1.splice(0, 1, {
						url: event.file.url,
						status: 'success',
						message: ''
					});
				});
			},

			getRequestHeader() {
				var header = {};
				var tokenName = uni.getStorageSync('tokenName');
				var tokenValue = uni.getStorageSync('tokenValue');
				header[tokenName] = tokenValue;
				return header;
			},

			submitAuthenticationInfo() {
				var that = this;
				if (that.realName === null || that.realName === "") {
					uni.showToast({
						title: "请输入姓名",
						icon: "none"
					});
					return;
				}
				if (that.idNumber === null || that.idNumber === "" || !/^\d{17}(\d|X|x)$/.test(that.idNumber)) {
					uni.showToast({
						title: "请输入身份证号码",
						icon: "none"
					});
					return;
				}
				if (that.identityCardPic3 === null || that.identityCardPic3 === "") {
					uni.showToast({
						title: "请上传手持证件照",
						icon: "none"
					});
					return;
				}
				if (that.identityCardPic1 === null || that.identityCardPic1 === "") {
					uni.showToast({
						title: "请上传身份证正面",
						icon: "none"
					});
					return;
				}
				if (that.identityCardPic2 === null || that.identityCardPic2 === "") {
					uni.showToast({
						title: "请上传身份证反面",
						icon: "none"
					});
					return;
				}
				uni.$uv.http.post('/member/submitAuthenticationInfo', {
					realName: that.realName,
					idNumber: that.idNumber,
					identityCardPic1: that.identityCardPic1,
					identityCardPic2: that.identityCardPic2,
					identityCardPic3: that.identityCardPic3,
				}).then(res => {
					uni.showToast({
						icon: 'success',
						title: '请等待审核',
						duration: 2000,
						complete: function() {
							setTimeout(() => {
								uni.reLaunch({
									url: "../my/my"
								});
							}, 2000);
						}
					});
				});
			},
		}
	}
</script>

<style scoped lang="less">
page {
	height: auto !important;
	background: url('/static/img/my_bg.png') no-repeat;
	background-size: 100% 120%;
	background-color: #FFFFFF;
}
	.real-name-bg {
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-bottom: 130rpx;
	}

	.name-title {
		margin-top: 60rpx;
		font-weight: bold;
		font-size: 44rpx;
		color: #000;
		line-height: 44rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-bottom: 80rpx;

		.title-tip {
			font-weight: 400;
			font-size: 20rpx;
			color: #8A8C90;
			line-height: 20rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-top: 20rpx;
		}
	}

	.name-col {
		font-weight: bold;
		font-size: 28rpx;
		color: #000;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-bottom: 29rpx;
	}

	.name-input-list {
		width: calc(100% -2rem);
		height: 186rpx;
		background: #FFF;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0 20px;
		margin-bottom: 80rpx;

		.uni-input-placeholder {
			color: rgba(255, 255, 255, 0.4) !important;
		}

		.name-item-tip {
			color: #8A8C90;
			;
		}

		.uni-input-input {
			color: #000;
		}
	}

	.name-input-item {
		position: relative;
		line-height: 40px;
		display: flex;
		height: 50%;
		align-items: center;

		uni-input {
			color: #000;
		}

		.uv-input {
			height: 100%;
			z-index: 10;

			>.uv-input__content {
				height: 100% !important;
			}
		}

		.uni-input-input {
			height: 50%;
		}
	}

	.name-input-item1 {
		border-bottom: 1px solid hwb(210 92% 7%);
		;
	}

	.name-item-tip {
		position: absolute;
		// top: 0;
		right: 0;
	}

	.pic3 {
		height: 264rpx;

		.uv-upload__wrap {
			width: 100%;
			height: 100%;

			.uv-upload__wrap__preview {
				width: 100%;
			}

			.pic3-img {
				height: 264rpx;
				width: 686rpx;
				background: url('../../static/img/mj/pic3.png') 100% 100%;
				background-size: 100% 100%;
				background-position: center;
			}
		}
	}

	.file-list {
		display: flex;
		margin-top: 28rpx;
		justify-content: space-between;

		.uv-upload {
			width: 50%;
			height: 264rpx;

			.uv-upload__wrap {
				width: 100%;
				height: 100%;

				.uv-upload__wrap__preview {
					width: 100%;
				}


			}
		}

		.pic1 {
			margin-right: 15rpx;

			.pic1-img {
				height: 264rpx;
				width: 328rpx;


				background: url('../../static/img/mj/pic1.png') 100% 100%;
				background-size: 100% 100%;
				background-position: center;
			}
		}

		.pic2 {
			margin-left: 15rpx;

			.pic2-img {
				height: 264rpx;
				width: 328rpx;


				background: url('../../static/img/mj/pic2.png') 100% 100%;
				background-size: 100% 100%;
				background-position: center;
			}
		}
	}

	.custom-tips {
		background: #fff2e2;
		padding: 32rpx;
		color: #836a6a;
		font-size: 26rpx;
	}

	.custom-tip {
		display: flex;
		padding-bottom: 4rpx;
		padding-top: 4rpx;
	}

	.custom-tip-l {}

	.custom-tip-r {}

	.fixed-bottomx {
		display: flex;
		justify-content: center;
		padding: 0 40rpx;
		box-sizing: border-box;
		margin-top: 98rpx;
	}

	.fixed-bottom-innerx {
		// .uv-button--primary{
		background:#FEE19E;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		width: calc(100% - 80rpx);
		height: 100rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #0B1327;
		letter-spacing: 1px;
		text-align: center;
		font-style: normal;
		text-transform: none;
		line-height: 100rpx;
		// }
	}
</style>